<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!--banner图开始-->
<div class="xyg-banner swiper-container">
    <div class="swiper-wrapper" id="bannerList">
        <script type="text/x-handlebars-template" id="banner-list-temp">
            {{#each list}}
            <div class="swiper-slide">
                <img src="{{image}}"/>
            </div>
            {{/each}}
        </script>
    </div>
    <div class="swiper-pagination swiper-p1"></div>
</div>
<!--banner图结束-->
<div class="xyg-flex-radius">
</div>
<div class="xyg-flex">
    <div class="xyg-flex-img weui-flex" style="padding-top: 20px;">
        <div class="weui-flex__item">
            <svg class="icon_1" aria-hidden="true">
                <use xlink:href="#icon-gerenzhongxin"></use>
            </svg>
        </div>
        <div class="weui-flex__item">
            <svg class="icon_1" aria-hidden="true">
                <use xlink:href="#icon-fenxiangzhuanqian"></use>
            </svg>
        </div>
    </div>
    <div class="xyg-flex-name weui-flex">
        <div class="font1 weui-flex__item">个人中心</div>
        <div class="font1 weui-flex__item">分享赚钱</div>
    </div>
    <div class="line-height-35 padding-bottom-10 weui-flex">
        <div class="font2 align-center weui-flex__item ">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-queren"></use>
            </svg>
            品牌直发
        </div>
        <div class="font2 align-center weui-flex__item">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-queren"></use>
            </svg>
            限时特卖
        </div>
        <div class="font2 align-center weui-flex__item">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-queren"></use>
            </svg>
            全场包邮
        </div>
    </div>

    <!-- 三 个产品展示结束-->
    <div style="min-height:600px;">
        <!-- 左右滑动类型开始 -->
        <div class="xyg-left-right-content swiper-container" style="">
            <div style="position: absolute;width:100%; height: 170px; text-align: left;">
                <img src="../images/pic/hoter.png?123" style="width:120px;margin-left: 20px; height: 170px;"/>
            </div>
            <div class="swiper-wrapper" id="itemHotList">
                <script type="text/x-handlebars-template" id="itemHot-list-temp">
                    {{#each list}}
                    <div class="swiper-slide">
                        <div class="xyg-product">
                            <img class="xyg-product-pic" src="{{getImgArrFirst image}}"/>
                            <div class="xyg-product-title">{{title}}</div>
                            <div class="xyg-product-price">￥{{prePrice}}</div>
                        </div>
                    </div>
                    {{/each}}
                </script>
            </div>
        </div>
        <div class="xyg_brand_tm weui-tab">
            <div class="xyg_brand weui-tab__bd">
                <div class="weui-tab__bd-item weui-tab__bd-item--active">
                    <div class="xyg-brand-content swiper-container">
                        <div class="swiper-wrapper" id="itemCatList">
                            <div class="swiper-slide">
                                <div class="brand_title brand_active" data-value="" onClick="itemCatClick(this)">
                                    全部
                                </div>
                            </div>
                            <script type="text/x-handlebars-template" id="itemCat-list-temp">
                                {{#each list}}
                                <div class="swiper-slide" >
                                    <div class="brand_title" data-value="{{id}}" onClick="itemCatClick(this)">
                                        {{title}}
                                    </div>
                                </div>
                                {{/each}}
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="xyg_run_banner weui-cells" id="itemList">

        </div>
        <!--预告会场结束-->
        <div class="xyg_banner_loadmore weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <div class="xyg_bottom"></div>
        <!--底部开始-->
        <div class="xyg-product-footer" id="footNavShow">

        </div>
        <!--底部结束-->
    </div>
</div>

<script type="text/x-handlebars-template" id="item-list-temp">
    <div class="weui-cell" data-id="{{id}}" onclick="goItemPage(this)">
        <div class="xyg_run_banner_right">
            <img src="{{getImgArrFirst image}}" style="height: 100px"/>
        </div>
        <div class="xyg_run_banner_left">
            <div class="xyg_run_banner_left_top">
                <div class="xyg_run_banner_left_top_text_title">
                    {{title}}
                </div>
                <div class="xyg_run_banner_left_top_text_time">
                    9月27日 9点结束
                </div>
            </div>
            <div class="xyg_run_banner_left_bottom">
                <div class="xyg_run_banner_left_bottom_key">19.9元起</div>
                <div class="xyg_run_banner_left_bottom_key">秋季男装</div>
            </div>
        </div>
    </div>
</script>
</body>
<script src="../fonts/iconfont.js?123"></script>
<script src="../lib/jquery-2.1.4.js"></script>
<script src="../js/jquery-weui.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../lib/fastclick.js"></script>
<script src="../lib/handlebars.min.js"></script>
<script src="../js/config.js"></script>
<script src="../js/base.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script type="text/javascript">
    var catId = "";
    var pageStart = 0;
    var num = 5;
    var loading = false;  //状态标记

    sendPost();
    $(document).ready(function (e) {
        initPage();
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            sendPost();
        });
    });

    $("#footNavShow").load("footnav.html");

    function sendPost() {
        pageStart++;
        $.get(baseURL + "api/item/page", {
            size: num,
            current: pageStart,
            catId : catId
        }, function (resultInfo) {
            if (resultInfo.data != null && resultInfo.data.length > 0) {
                for (var i = 0; i < resultInfo.data.length; i++) {
                    var item = resultInfo.data[i];
                    var itemTemp = $('#item-list-temp').html();
                    var hanItem = Handlebars.compile(itemTemp);
                    $('#itemList').append(hanItem(item));
                    loading = false;
                    if (!resultInfo.hasNext) {
                        $(document.body).destroyInfinite();
                        $(".xyg_banner_loadmore").hide();
                    }
                }
            } else {
                $(document.body).destroyInfinite();
                $(".xyg_banner_loadmore").hide();
            }
        }, "json");
    }
    
    function initPage() {
        $("#itemList").html("");
        $(document.body).infinite();
    }

    // 图
    $.get(baseURL + "api/banner/list","",function(res) {
        if (res.code == 0) {
            //获取到handlebars这个模板中的全部html内容
            var bannerTemp = $('#banner-list-temp').html();
            //编译
            var hanBanner = Handlebars.compile(bannerTemp);
            //把编译完成的代码放入到 .student-temp 的这个容器中
            $('#bannerList').html(hanBanner(res));
            //初始化banner图
            $(".xyg-banner").swiper({
                pagination: '.swiper-p1',
                loop: true,
                autoplay: 3000
            });
        }
    });

    // 热门商品
    $.get(baseURL + "api/item/hotList","",function(res) {
        if (res.code == 0) {
            var itemHotTemp = $('#itemHot-list-temp').html();
            var hanItemHot = Handlebars.compile(itemHotTemp);
            $('#itemHotList').html(hanItemHot(res));

            var swiper = new Swiper('.xyg-left-right-content', {
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 10
            });
        }
    });

    Handlebars.registerHelper("getImgArrFirst",function(str) {
        if(str==null || str=="") {
            return str;
        }
        var imageArr = str.split(",");
        if(imageArr != null && imageArr.length > 0){
            return imageArr[0];
        }
        return "";
    });


    // 商品分类
    $.get(baseURL + "api/itemCat/list","",function(res) {
        if (res.code == 0) {
            var itemCatTemp = $('#itemCat-list-temp').html();
            var hanItemCat = Handlebars.compile(itemCatTemp);
            $('#itemCatList').append(hanItemCat(res));

            $(".xyg-brand-content").swiper({
                pagination: '.swiper-p2',
                slidesPerView: 5,
                slidesPerColumn: 1,
                spaceBetween: 5
            });
        }
    });

    // 分页查询商品
    function itemCatClick(obj) {
        $(".xyg-brand-content .brand_title").removeClass("brand_active");
        $(obj).addClass("brand_active");
        pageStart = 0;
        catId = $(obj).attr("data-value");
        initPage();
        sendPost();
    }

    function goItemPage(obj) {
        var itemId = $(obj).attr("data-id");
        window.location.href="/mobile/view/product.html?itemId="+itemId;
    }
</script>
</html>

